<template>
  <el-popover
    :show-after="800"
    placement="right"
    title="组织关联产品分类"
    width="400px"
    @show="open"
  >
    <template #reference>
      <el-tooltip
        v-if="info.name.length >= 9"
        class="item"
        effect="dark"
        :content="info.name"
        placement="right"
      >
        <span class="lable">{{ info.name }} </span>
      </el-tooltip>
      <span class="lable" v-else>{{ info.name }}</span>
    </template>
    <div class="dialog-content">
      <el-tree
        :data="categoryInfo"
        :props="props.defaultProps"
        @node-click="handleNodeClick"
        highlight-current
        :expand-on-click-node="false"
        node-key="id"
        ref="treeList"
        class="tree"
        :filter-node-method="filterNode"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <el-tooltip
              v-if="node.label.length >= 9"
              class="item"
              effect="dark"
              :content="node.label"
              placement="right"
            >
              <span class="lable">{{ node.label }} </span>
            </el-tooltip>
            <span class="lable" v-else>{{ node.label }}</span>
            <span style="color: #cccccc">{{
              props.type == "spu"
                ? data.spu_count || "0"
                : props.type == "sku"
                ? data.sku_count || "0"
                : ""
            }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </el-popover>
</template>

<script setup lang="jsx">
import { getDepartmentCategory } from "./api.js";
import { reactive, toRefs } from "vue";

const visible = ref(false);

const props = defineProps({
  info: {
    type: [Array, Object, Number],
    default: () => {
      return {};
    },
  },
  defaultProps: {
    type: Object,
    default: {
      label: "name",
      children: "son",
    },
  },
});

const { info } = toRefs(props);

const data = reactive({
  categoryInfo: [],
});

const { categoryInfo } = toRefs(data);
// 打开弹窗
const open = async () => {
  getDetail();
};

const getDetail = async () => {
  try {
    const res = await getDepartmentCategory({
      all_child_user: info.value.all_child_user,
    });
    categoryInfo.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};

// tree 过滤方法
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.includes(value);
};

const emit = defineEmits(["node-click"]);

const handleNodeClick = (data) => {
  // emit("node-click", data);
};
</script>
<style>
.dialog-content {
  height: 400px;
  overflow: auto;
}
</style>
